<template>
  <el-container>
    <div class="aside">
    <el-aside :width="h_width" style="background-color: rgb(1, 20, 44); height:100%" :key="h_width">
      <el-menu ref="Menu" :class="manuSty">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-data" :style="tag_sty"></i>数据统计</template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="jump('1-1')">数据统计(地域)</el-menu-item>
            <el-menu-item index="1-2" @click="jump('1-2')">省销售统计(地域)</el-menu-item>
            <el-menu-item index="1-3" @click="jump('1-3')">市销售统计(地域)</el-menu-item>
            <el-menu-item index="1-4" @click="jump('1-4')">区销售统计(地域)</el-menu-item>
            <el-menu-item index="1-5" @click="jump('1-5')">省活跃度统计(地域)</el-menu-item>
            <el-menu-item index="1-6" @click="jump('1-6')">市活跃度统计(地域)</el-menu-item>
            <el-menu-item index="1-7" @click="jump('1-7')">区活跃度统计(地域)</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2" >
          <template slot="title"><i class="el-icon-folder" :style="tag_sty"></i>卡号管理</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="jump('2-1')">卡号批次设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3" >
          <template slot="title"><i class="el-icon-user" :style="tag_sty"></i>大客户专员专区</template>
          <el-menu-item-group>
            <el-menu-item index="3-1" @click="jump('3-1')">大客户专员列表</el-menu-item>
            <el-menu-item index="3-2" @click="jump('3-2')">设置</el-menu-item>
            <el-menu-item index="3-3" @click="jump('3-3')">订单列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4" >
          <template slot="title"><i class="el-icon-notebook-1" :style="tag_sty"></i>财务管理</template>
          <el-menu-item-group>
            <el-menu-item index="4-1" @click="jump('4-1')">钱包列表</el-menu-item>
            <el-menu-item index="4-2" @click="jump('4-2')">订单列表</el-menu-item>
            <el-menu-item index="4-3" @click="jump('4-3')">审核订单列表</el-menu-item>
            <el-menu-item index="4-4" @click="jump('4-4')">提现列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5" >
          <template slot="title"><i class="el-icon-setting" :style="tag_sty"></i>系统管理</template>
          <el-menu-item-group>
            <el-menu-item index="5-1" @click="jump('5-1')">人员管理</el-menu-item>
            <el-menu-item index="5-2" @click="jump('5-2')">角色管理</el-menu-item>
            <el-menu-item index="5-3" @click="jump('5-3')">权限管理</el-menu-item>
            <el-menu-item index="5-4" @click="jump('5-4')">菜单管理</el-menu-item>

          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    </div>

    <el-container>
      <el-header style="height:100px;line-height:60px; text-align: right; font-size: 18px">

        <div id="tag">
          <i :class="str_style" style="font-size: 30px;" @click="stretch"></i>
        </div>
        
        <div id="User">
        <img src="./../assets/头像.gif" class="ImgTouXiang">
        <span>
          {{user}}
        </span>
        </div>
        <div style="clear:both"></div>

      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>
    
    
  </el-container>
</template>



<script>
export default {
  data() {
    return {
      user:'admin01',
      manuSty:"el-menu-vertical-demo el-menu",
      h_width:"230px",
      str_style:"el-icon-s-fold",
      tag_sty:"",
      router_data:[
        //程学飞
        {index:'1-1',trail:"/interface/Sjtj"},
        {index:'1-2',trail:"/interface/ShengXstj"},
        {index:'1-3',trail:"/interface/ShiXstj"},
        {index:'1-4',trail:"/interface/QuXstj"},
        {index:'1-5',trail:"/interface/ShengHydtj"},
        {index:'1-6',trail:"/interface/ShiHydtj"},
        {index:'1-7',trail:"/interface/QuHydtj"},
        //李自
        {index:'2-1',trail:"/interface/card"},
        //成成
        {index:'3-1',trail:"/interface/Dakehu"},
        {index:'3-2',trail:"/interface/Orderlist"},
        {index:'3-3',trail:"/interface/Setup"},
        //陈利
        {index:'4-1',trail:"/interface/WalletList"},
        {index:'4-2',trail:"/interface/OrderList01"},
        {index:'4-3',trail:"/interface/CheckList"},
        {index:'4-4',trail:"/interface/Withdraw"},
        //王军
        {index:'5-1',trail:"/interface/Caidan"},
        {index:'5-2',trail:"/interface/Jiaoshe"},
        {index:'5-3',trail:"/interface/Quanxian"},
        {index:'5-4',trail:"/interface/Renyuan"},
      ],
    }
  },
  methods:{
      jump(index){
        for (var i = 0; i < this.router_data.length; i++) 
        {
          if(this.router_data[i].index==index)
          {
            this.$router.push(this.router_data[i].trail)
            break
          }
        }
      },

      stretch(){
        if(this.h_width=="230px")
        {
          this.manuSty="el-menu-vertical-demo el-menu--collapse el-menu ";
          this.h_width="50px";
          this.str_style="el-icon-s-unfold";
          this.tag_sty="position: relative;right: 10px;margin-right:10px"
        }else{
          this.manuSty="el-menu-vertical-demo el-menu";
          this.h_width="230px";
          this.str_style="el-icon-s-fold";
          this.tag_sty=""
        }
        console.log(this.h_width);
      }
  }

};
</script>

<style lang="less" scoped>
*{
    margin: 0px;
    padding: 0px;
}
#app /deep/ .el-container{
  height: 100%;
}

.el-submenu /deep/ .el-menu {
  background-color: rgb(1, 20, 44);
}

.el-submenu /deep/ .el-submenu__title{
  background-color:  rgb(1, 20, 44);
  color: white;
}

.aside /deep/ .el-menu{
  border: 0px !important;
}

.el-submenu__title {
    color: white;
}
.el-menu-item {
    background-color:  rgb(1, 30, 65);
    color: white;
}

.el-menu-item:hover{
  color: rgb(0, 0, 0);
}

element.style {
    height: 100px;
    text-align: 60px;
}
.el-container{
    height: 100%;
}

.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  width: 100%;
  height: 50px;
}

.el-main{
  height: 100%;
  width: 100%;
  background-color: #e9eef3;
}

.ImgTouXiang{
  height:50px;
  width: 50px;
  border-radius:100px;
  position: relative;
  top:16px;
}

#User{
  width: 140px;
  float: right;
  border-bottom: 2px solid skyblue;
  margin-right: 20px;
}

#tag{
  float: left;
  margin-top: 7px;
}

#tag:hover{
  cursor: pointer;
}
</style>

